<template>
  <view class="container">
    <!-- 下拉刷新组件 -->
    <scroll-view 
      scroll-y="true" 
      class="scroll-view" 
      refresher-enabled 
      :refreshing="refreshing" 
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <!-- 列表内容 -->
      <view class="list">
        <view class="item" v-for="(item, index) in listData" :key="index" @click="navigateToDetail(item)">
          <image class="item-image" :src="item.image" mode="aspectFill"></image>
          <view class="item-content">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-desc">{{ item.desc }}</text>
            <view class="item-meta">
              <text class="item-price">¥{{ item.price }}/月</text>
              <text class="item-location">{{ item.location }}</text>
            </view>
          </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="load-more">
          <text v-if="loading">加载中...</text>
          <text v-else-if="noMore">没有更多数据了</text>
          <text v-else>上拉加载更多</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 右下角浮动发布按钮 -->
    <view class="float-btn" @click="navigateToPublish()">
      <text class="icon">+</text>
    </view>
  </view>
</template>

<script>
import { listSpots } from "@/api/parking/spots";
export default {
  data() {
    return {
      listData: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数据量
      loading: false, // 是否正在加载
      noMore: false, // 是否没有更多数据
      refreshing: false // 是否正在刷新
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData() {
      if (this.loading || this.noMore) return
      
      this.loading = true
      
      try {
        // 模拟API请求
        const newData = await this.getSpots(this.page, this.pageSize)
        
        if (this.page === 1) {
          this.listData = newData
        } else {
          this.listData = [...this.listData, ...newData]
        }
        
        // 判断是否还有更多数据
        if (newData.length < this.pageSize) {
          this.noMore = true
        } else {
          this.page++
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },
    
    navigateToPublish(){
      uni.navigateTo({
         url: '/pages/parking/publish'
      }) 
    },
    
    // 跳转到详情页
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/parking/detail?id=${item.id}`
      });
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.page = 1
      this.noMore = false
      this.loadData()
    },
    
    // 加载更多
    loadMore() {
      if (!this.noMore) {
        this.loadData()
      }
    },
    
    // 获取车位列表
    getSpots(page, pageSize) {
      return listSpots({
        pageNum: page,
        pageSize: pageSize
      }).then(res => {
        return res.rows.map(item => ({
          id: item.id,
          title: item.title,
          desc: item.description,
          price: item.pricePerMonth,
          image: item.photoUrl ? item.photoUrl : 'https://picsum.photos/200/200'
        }))
      })
    }
  }
}
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scroll-view {
  height: 100%;
}

.list {
  padding: 20rpx;
}

.item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.item-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.load-more {
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.float-btn {
  position: fixed;
  right: 40rpx;
  bottom: 80rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.float-btn .icon {
  color: #fff;
  font-size: 60rpx;
  font-weight: bold;
  line-height: 1;
  margin-top: -6rpx;
}

/* 按钮点击效果 */
.float-btn:active {
  transform: scale(0.95);
  opacity: 0.9;
}
</style>
